/* stylelint-disable no-descending-specificity */
:root {
  --el-color-primary: #{getCssVar(color, primary)};
  --el-bg-color: #{getCssVar(color, bg, 0)};
  --el-border-color-light: #{getCssVar(color, border)};
  --el-border-radius-base: #{getCssVar(border, radius, small)};
  --el-mask-color: rgba(#{getCssVar(grey, 6)}, 0.1);
  --el-text-color-regular: #{getCssVar(color, text, 0)};
  --el-text-color-placeholder: #{getCssVar(color, text, 3)};
  --el-font-size-base: #{getCssVar(font-size, regular)};
  --el-disabled-text-color: #{getCssVar(color, disabled, text)};
  --el-disabled-bg-color: #{getCssVar(color, disabled, fill)};
  --el-disabled-border-color: #{getCssVar(color, disabled, border)};
  --el-border-color-hover: #{getCssVar(color, primary, hover)};
  --el-fill-color-light: #{getCssVar(color, bg, 2)};
  --el-border-color: #{getCssVar(color, border)};
  --el-border-color-extra-light: #{getCssVar(color, secondary, light, default)};
  --el-bg-color-overlay: #{getCssVar(color, bg, 3)};
  --el-border-color-lighter: #{getCssVar(color, border)};
  --el-fill-color-blank: transparent;
  --el-fill-color-lighter: #{getCssVar(color, fill, 0)};
  --el-border-color-darker: #{getCssVar(color, border)};
  --el-text-color-primary: #{getCssVar(color, text, 0)};

  // 警告色替换
  --el-color-info: #{getCssVar(color, text, 2)};
  --el-color-success: #{getCssVar(color, success)};
  --el-color-warning: #{getCssVar(color, warning)};
  --el-color-error: #{getCssVar(color, danger)};

  color: getCssVar(color, text, 0);
  background-color: getCssVar(color, bg, 0);
}

.el-input-number {
  .el-input__wrapper {
    --el-border-color: #{getCssVar(color, border)};
    --el-input-border-color: #{getCssVar(color, border)};
  }
}

// 去除 溢出阴影
.el-input-number__increase:hover
~ .el-input:not(.is-disabled)
.el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-input-focus-border-color);
}

// 模态
.el-dialog__headerbtn {
  width: 32px;
  height: 32px;
}

.el-input,
.el-textarea,
.el-date-editor {
  --el-input-text-color: #{getCssVar(editor, default, text-color)};
  --el-input-border-color: #{getCssVar(editor, default, border-color)};
  --el-input-hover-border-color: #{getCssVar(editor, hover, border-color)};
}

.el-autocomplete-suggestion {
  --el-fill-color-light: #{getCssVar(editor, hover, bg-color)};
}

// 默认输入框背景色
.el-input__wrapper {
  --el-input-bg-color: #{getCssVar(editor, default, bg-color)};
}

// 删除图标顺序
.el-input {
  .el-input__suffix {
    .el-input__icon {
      order: 1;
    }

    .el-input__clear {
      order: 0;
    }
  }
}

// 飘窗
.el-drawer {
  .el-drawer__body {
    padding: 0;
  }
}

// 应用菜单
.el-menu {
  --el-menu-bg-color: transparent;
  --el-menu-text-color: #{getCssVar('color', 'text', 0)};
  --el-menu-hover-bg-color: #{getCssVar('color', 'bg', 2)};
}

// 下拉框
.el-dropdown-menu {
  background-color: getCssVar('color', 'bg', 3);
}

.el-dropdown-menu__item {
  color: getCssVar('color', 'text', 0);

  &:hover {
    color: getCssVar('color', 'primary', 'active', 'text');
    background-color: getCssVar('color', 'primary', 'active');
  }
}

// 树
.el-tree {
  --el-tree-text-color: #{getCssVar(color, text, 0)};
  --el-tree-node-hover-bg-color: #{getCssVar(color, fill, 0)};
  --el-tree-expand-icon-color: #{getCssVar(color, text, 2)};

  font-size: getCssVar('font-size', 'regular');
  background-color: transparent;

  &.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
    background-color: #{getCssVar(color, primary, light, default)};
  }
}

// 按钮 begin
.el-button {
  --el-button-bg-color: #{getCssVar(color, primary)};
  --el-button-text-color: #{getCssVar(color, primary, text)};
  --el-button-hover-text-color: #{getCssVar(color, primary, text)};
  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
  --el-button-hover-border-color: #{getCssVar(color, primary, hover)};
  --el-button-active-text-color: #{getCssVar(color, primary, text)};
  --el-button-active-bg-color: #{getCssVar(color, primary, active)};
  --el-button-active-border-color: #{getCssVar(color, primary, active)};
  --el-button-disabled-bg-color: #{getCssVar(color, disabled, bg)};
  --el-button-disabled-text-color: #{getCssVar(color, disabled, text)};
  --el-button-border-color: #{getCssVar(color, border)};

  border-width: 0;
}

.el-button--primary {
  --el-button-bg-color: #{getCssVar(color, primary)};
  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
  --el-button-active-bg-color: #{getCssVar(color, primary, active)};
}

.el-button--info {
  --el-button-bg-color: var(--el-fill-color-blank);
  --el-button-text-color: var(--el-text-color-regular);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-button-disabled-border-color: var(--el-border-color-light);
  --el-button-divide-border-color: #{getCssVar(color, border)};
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-7);
  --el-button-active-text-color: var(--el-button-hover-text-color);
  --el-button-active-border-color: var(--el-color-primary);
  --el-button-active-bg-color: var(--el-button-hover-bg-color);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-hover-link-text-color: var(--el-color-info);
  --el-button-active-color: var(--el-text-color-primary);

  border-width: 1px;
}

.el-button--success {
  --el-button-bg-color: #{getCssVar(color, success)};
  --el-button-hover-bg-color: #{getCssVar(color, success, hover)};
  --el-button-active-bg-color: #{getCssVar(color, success, active)};
}

.el-button--warning {
  --el-button-bg-color: #{getCssVar(color, warning)};
  --el-button-hover-bg-color: #{getCssVar(color, warning, hover)};
  --el-button-active-bg-color: #{getCssVar(color, warning, active)};
}

.el-button--danger {
  --el-button-bg-color: #{getCssVar(color, danger)};
  --el-button-hover-bg-color: #{getCssVar(color, danger, hover)};
  --el-button-active-bg-color: #{getCssVar(color, danger, active)};
}

.el-button.is-link {
  --el-button-text-color: #{getCssVar(color, link)};
  --el-button-hover-link-text-color: #{getCssVar(color, link, hover)};
}

.el-button.is-text {
  --el-button-text-color: #{getCssVar(color, primary)};

  background-color: transparent;
  border: 0 solid transparent;
}

.el-button.is-plain {
  --el-button-hover-text-color: #{getCssVar(color, primary, text)};
  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
}

.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover {
  background-color: #{getCssVar(color, fill, 0)};
}

.el-button [class*=el-icon]+span{
  margin-left: 0;
}

// 按钮 end

//  表格 begin
.el-table {
  --el-table-row-hover-bg-color: rgba(#{getCssVar(grey, 1)}, 1);
  --el-table-current-row-bg-color: rgba(#{getCssVar(blue, cyan, 0)}, 1);
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-border: 0.1px solid #{getCssVar(color, border)};
  --el-table-border-color: #{getCssVar(color, border)};

  font-size: #{getCssVar(font, size, regular)};

  //  表格底部额外 border
  .el-table__inner-wrapper::before {
    display: none;
  }
}

// 表格分页栏
.el-pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #{getCssVar(color, text, 2)};
  --el-pagination-hover-color: #{getCssVar(color, text, 0)};
  --el-pagination-button-bg-color: transparent;
  --el-pagination-button-color: #{getCssVar(color, text, 0)};
  --el-pagination-button-disabled-bg-color: transparent;
  --el-disabled-bg-color: transparent;
}

.is-background .el-pager li:hover {
  background-color: #{getCssVar(color, fill, 0)};
}

.el-popper__arrow {
  display: none;
}

.el-pagination__jump {
  color: #{getCssVar(color, text, 0)};

  .el-input__wrapper {
    background-color: #{getCssVar(color, fill, 0)};
    box-shadow: none;
  }

  .el-input__wrapper:hover {
    box-shadow: none;
  }

  .el-input__inner {
    color: #{getCssVar(color, text, 0)};
  }
}

.el-pagination.is-background .el-pager li.is-active {
  color: #{getCssVar(color, primary)};
  background-color: #{getCssVar(color, primary, light, default)};
}

// 表格分页数量选择器
.el-popper.is-light {
  background-color: #{getCssVar(color, bg, 3)};
  border-width: 0;

  .el-select-dropdown__item {
    font-weight: #{getCssVar(font-weight, regular)};
    color: #{getCssVar(color, text, 0)};
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #{getCssVar(color, fill, 0)};
  }

  .el-select-dropdown__item.is-disabled{
    color: #{getCssVar(color, disabled, text)};
    cursor: not-allowed;
  }
}

.el-pagination button {
  --el-button-hover-bg-color: #{getCssVar(color, fill, 0)};
  --el-button-hover-text-color: #{getCssVar(color, text, 0)};
}

.el-pagination__sizes {
  --el-select-border-color-hover: transparent;

  .el-select {
    --el-select-border-color-hover: transparent;
    --el-select-input-focus-border-color: #{getCssVar(color, focus, border)};
  }

  .el-input__wrapper {
    background-color: #{getCssVar(color, fill, 0)};
    box-shadow: none;
  }

  .el-input__inner {
    color: #{getCssVar(color, text, 0)};
  }

  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: none;
  }
}

//  表格 end

//  卡片 begin
.el-card {
  --el-card-border-radius: #{getCssVar(border, radius, medium)};
  --el-card-padding: #{getCssVar(spacing, base)};
  --el-card-bg-color: transparent;
}

//  卡片 end

// 下拉菜单
.el-scrollbar {
  --el-scrollbar-bg-color: #{getCssVar(color, fill, 2)};
  --el-scrollbar-hover-bg-color: #{getCssVar(color, fill, 2)};
  --el-scrollbar-opacity: 1;
}

// 滑动输入条
.el-slider {
  --el-slider-stop-bg-color: #{getCssVar(color, fill, 0)};
  --el-slider-runway-bg-color: #{getCssVar(color, fill, 0)};
}

// 文件上传
.el-upload--picture-card {
  border-width: 2px;
}

.el-upload--picture-card:hover {
  color: #{getCssVar(color, fill, 0)};
  background-color: #{getCssVar(color, fill, 1)};
  border-color: #{getCssVar(color, border)};
}

// 选择
.el-select__tags .el-tag--info {
  color: #{getCssVar(editor, default, text-color)};
  background-color: #{getCssVar(color, fill, 0)};
}

// 图片预览
.el-image {
  .el-image-viewer__actions__inner {
    color: #{getCssVar(color, text, 1)};
  }

  .el-image-viewer__actions {
    background-color: #{getCssVar(color, bg, 1)};
  }

  .el-image-viewer__close {
    color: #{getCssVar(color, text, 1)};
    background-color: #{getCssVar(color, bg, 1)};
  }
}

// 评分
.el-rate {
  --el-rate-fill-color: #{getCssVar(color, primary)};
}

// 弹出框
.el-alert--info {
  --el-alert-bg-color: #{getCssVar(color, bg, 1)};
}

// 输入框后缀区间隔
.el-input__suffix-inner {
  gap: getCssVar(spacing, tight);
}

// 多选框
.el-checkbox{
  --el-checkbox-disabled-input-fill: #{getCssVar(color, disabled, fill)};
}

.el-checkbox__label {
  padding-left: getCssVar(spacing, base-tight);
}

// 单选框
.el-radio__label {
  padding-left: getCssVar(spacing, base-tight);
}

// 下拉悬浮框
.el-popper.el-dropdown__popper {
  .el-dropdown-menu {
    padding: getCssVar(spacing, extra-tight) 0;
    background-color: getCssVar(color, primary);

    .el-dropdown-menu__item {
      padding: getCssVar(spacing, tight) getCssVar(spacing, base);
      color: getCssVar(color, primary, text);
      background-color: getCssVar(color, primary);

      &:hover {
        background-color: getCssVar(color, primary, hover);
      }

      &.is-disabled{
        cursor: not-allowed;
        background-color: getCssVar(color, primary, disabled);
      }
    }
  }

  .el-scrollbar {
    .el-dropdown__list {
      background-color: getCssVar(color, primary);

      .el-dropdown-menu {
        padding: getCssVar(spacing, extra-tight) 0;
      }

      .el-dropdown-menu__item {
        padding: getCssVar(spacing, tight) getCssVar(spacing, base);
        color: getCssVar(color, primary, text);
        background-color: getCssVar(color, primary);

        &:hover {
          background-color: getCssVar(color, primary, hover);
        }

        &.is-disabled{
          cursor: not-allowed;
          background-color: getCssVar(color, primary, disabled);
        }
      }
    }
  }
}

// 下拉框内浏览器内置样式边框去除
.el-dropdown .el-tooltip__trigger:focus-visible {
  outline: none;
}

// 下拉框按钮滚动条去除
.el-dropdown .el-dropdown__caret-button::before {
  height: 100%;
}

// 模态和飘窗内视图背景色补充
.el-drawer__body,
.el-dialog__body {
  background-color: getCssVar(view, bg, color);
}

// loading遮罩
.el-loading-mask {
  z-index: 11;
}

// 分组输入框边框统一
.el-input-group--prepend>.el-input__wrapper {
  border-top-left-radius: var(--el-input-border-radius);
  border-bottom-left-radius: var(--el-border-radius-base);
}

.el-tabs {
  .el-tabs__item {
    color: getCssVar(color, text, 0);
  }
}

.el-message-box {
  --el-messagebox-title-color: #{getCssVar(color, text, 0)};
}

.el-overlay {
  --el-overlay-color-lighter: #{getCssVar(color, bg, overlay)};
}